layui.use(['table', 'dropdown'], function () {
    var table = layui.table;
    var dropdown = layui.dropdown;
    var $ = layui.jquery;
    var laydate = layui.laydate;
    var form = layui.form;

    // 创建渲染实例
    var inst = table.render({
        elem: '#drugList'
        , url: '/api/drug/page' // 查询全部信息
        , toolbar: '#toolbarDemo',
        parseData: function (res) { // res 即为原始返回的数据
            return {
                "code": res.status, // 解析接口状态
                "count": res.total, // 解析数据长度
                "data": res.data // 解析数据列表
            };
        }
        , defaultToolbar: ['filter', 'exports', 'print', {
            title: '提示'
            , layEvent: 'LAYTABLE_TIPS'
            , icon: 'layui-icon-tips'
        }]
        , page: true
        , cols: [[
            {type: 'checkbox', fixed: 'left'}
            , {field: 'id', fixed: 'left', title: 'ID', sort: true}
            , {field: 'name', title: '药物名称'}
            , {field: 'drugType', title: '药物类型', hide: 0}
            , {field: 'unit', title: '药物单位'}
            , {field: 'specification', title: '药物规范'}
            , {field: 'efficacyClassification', title: '药物功效分类'}
            , {
                field: 'price',
                title: '药物价格 <i class="layui-icon layui-icon-tips layui-font-14" title="该字段开启了编辑功能" style="margin-left: 5px;"></i>',
                edit: 'text'
            }
            , {
                field: 'drugCount',
                title: '药品库存 <i class="layui-icon layui-icon-tips layui-font-14" title="该字段开启了编辑功能" style="margin-left: 5px;"></i>',
                edit: 'text'
            }
            , {field: 'productionDate', title: '药品生产日期', hide: '1'}
            , {field: 'qualityDate', title: '有效期'}
            , {
                field: 'limitStatus', title: '是否限制药', templet: function (d) {
                    return d.limitStatus === 0 ? '是' : '否';
                }
            }
            , {field: 'manufacturer', title: '制造商', hide: '1'}
            , {field: 'wholesalePrice', title: '批发商的价格', hide: '1'}
            , {field: 'phone', title: '手机号', hide: '1'}
            , {
                field: 'createDatetime',
                title: '创建时间',
                templet: function (d) {
                    var timestamp = d.createDatetime; // 获取时间戳
                    var date = new Date(timestamp); // 创建Date对象
                    var datetime = date.toISOString().slice(0, 19).replace('T', ' '); // 将日期时间转换为ISO 8601格式并去除时区信息
                    return datetime;
                }, hide: '1'
            }
            , {fixed: 'right', title: '操作', width: 134, minWidth: 125, toolbar: '#barDemo'}
        ]]
        , done: function () {
            var id = this.id;
            // 下拉按钮测试
            dropdown.render({
                elem: '#dropdownButton' // 可绑定在任意元素中，此处以上述按钮为例
                , data: [{
                    id: 'add',
                    title: '添加'
                }, {
                    id: 'update',
                    title: '编辑'
                }, {
                    id: 'delete',
                    title: '删除'
                }]
                // 菜单被点击的事件
                , click: function (obj) {
                    var checkStatus = table.checkStatus(id)
                    var data = checkStatus.data; // 获取选中的数据
                    switch (obj.id) {
                        case 'add':
                            layer.open({
                                title: '添加',
                                type: 1,
                                area: ['80%', '80%'],
                                content: '<div style="padding: 16px;">自定义表单元素</div>'
                            });
                            break;
                        case 'update':
                            if (data.length !== 1) return layer.msg('请选择一行');
                            layer.open({
                                title: '编辑',
                                type: 1,
                                area: ['80%', '80%'],
                                content: '<div style="padding: 16px;">自定义表单元素</div>'
                            });
                            break;
                        case 'delete':
                            if (data.length === 0) {
                                return layer.msg('请选择一行');
                            }
                            layer.msg('delete event');
                            break;
                    }
                }
            });

            // 重载测试
            dropdown.render({
                elem: '#reloadTest' // 可绑定在任意元素中，此处以上述按钮为例
                , data: [{
                    id: 'reload',
                    title: '重载'
                }, {
                    id: 'reload-deep',
                    title: '重载 - 参数叠加'
                }, {
                    id: 'reloadData',
                    title: '仅重载数据'
                }, {
                    id: 'reloadData-deep',
                    title: '仅重载数据 - 参数叠加'
                }]
                // 菜单被点击的事件
                , click: function (obj) {
                    switch (obj.id) {
                        case 'reload':
                            // 重载 - 默认（参数重置）
                            table.reload('drugList', {});
                            break;
                        case 'reload-deep':
                            // 重载 - 深度（参数叠加）
                            table.reload('drugList', {}, true);
                            break;
                        case 'reloadData':
                            // 数据重载 - 参数重置
                            table.reloadData('drugList', {
                                where: {}
                                , scrollPos: 'fixed'  // 保持滚动条位置不变 - v2.7.3 新增
                                , height: 2000 // 测试无效参数（即与数据无关的参数设置无效，此处以 height 设置无效为例）
                                //,url: '404'
                                //,page: {curr: 1, limit: 30} // 重新指向分页
                            });
                            break;
                        case 'reloadData-deep':
                            // 数据重载 - 参数叠加
                            table.reloadData('drugList', {}, true);
                            break;
                    }
                    layer.msg('可观察 Network 请求参数的变化');
                }
            });

            // 行模式
            dropdown.render({
                elem: '#rowMode'
                , data: [{
                    id: 'default-row',
                    title: '单行模式（默认）'
                }, {
                    id: 'multi-row',
                    title: '多行模式'
                }]
                // 菜单被点击的事件
                , click: function (obj) {
                    var checkStatus = table.checkStatus(id)
                    var data = checkStatus.data; // 获取选中的数据
                    switch (obj.id) {
                        case 'default-row':
                            table.reload('drugList', {
                                lineStyle: null // 恢复单行
                            });
                            layer.msg('已设为单行');
                            break;
                        case 'multi-row':
                            table.reload('drugList', {
                                // 设置行样式，此处以设置多行高度为例。若为单行，则没必要设置改参数 - 注：v2.7.0 新增
                                lineStyle: 'height: 300px;'
                            });
                            layer.msg('即通过设置 lineStyle 参数可开启多行');
                            break;
                    }
                }
            });
        }
        , error: function (res, msg) {
            console.log(res, msg)
        }
    });

    // 工具栏事件
    table.on('toolbar(drugList)', function (obj) {
        var id = obj.config.id;
        var checkStatus = table.checkStatus(id);
        var othis = lay(this);
        switch (obj.event) {
            case 'getCheckData':
                var data = checkStatus.data;
                layer.alert(layui.util.escape(JSON.stringify(data)));
                break;
            case 'getData':
                var getData = table.getData(id);
                console.log(getData);
                layer.alert(layui.util.escape(JSON.stringify(getData)));
                break;
            case 'getRefresh':
                inst.reload();
                break;
            case 'LAYTABLE_TIPS':
                layer.alert('自定义工具栏图标按钮');
                break;
        }
        ;
    });

    // 触发单元格工具事件
    table.on('tool(drugList)', function (obj) { // 双击 toolDouble
        var data = obj.data; // 获得当前行数据
        // console.log(obj)
        if (obj.event === 'edit') {
            layer.open({
                title: '编辑 - id:' + data.id,
                type: 1,
                area: ['80%', '80%'],
                content: '<div style="padding: 16px;">自定义表单元素</div>'
            });
        } else if (obj.event === 'more') {
            // 更多 - 下拉菜单
            dropdown.render({
                elem: this, // 触发事件的 DOM 对象
                show: true, // 外部事件触发即显示
                data: [{
                    title: '查看',
                    id: 'detail'
                }, {
                    title: '删除',
                    id: 'del'
                }],
                click: function (menudata) {
                    if (menudata.id === 'detail') {
                        layer.msg('查看操作，当前行 ID:' + data.id);
                    } else if (menudata.id === 'del') {
                        layer.confirm('确认删除么', function (index) {
                            $.ajax({
                                url: "/api/drug/" + data.id,
                                method: "delete",
                                dataType: "json",
                                success: function (res) {
                                    if (res.status === 1) {
                                        inst.reload();
                                        layer.msg(res.message, {icon: 1})
                                    } else {
                                        layer.msg(res.message, {icon: 2})
                                    }
                                }, complete: function (XMLHttpRequest, status) {
                                    if (status !== "success") {
                                        layer.msg("请求出错，请稍候再试");
                                    }
                                }.bind(this)
                            })
                            layer.close(index);
                        });
                    }
                },
                align: 'right', // 右对齐弹出
                style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
            })
        }
    });

    // 触发表格复选框选择
    table.on('checkbox(drugList)', function (obj) {
        console.log(obj)
    });

    // 触发表格单选框选择
    table.on('radio(drugList)', function (obj) {
        console.log(obj)
    });

    // 行单击事件
    table.on('row(drugList)', function (obj) {
        //console.log(obj);
        //layer.closeAll('tips');
    });
    // 行双击事件
    table.on('rowDouble(drugList)', function (obj) {
        console.log(obj);
    });

    // 单元格编辑事件
    table.on('edit(drugList)', function (obj) {
        var field = obj.field; // 得到字段
        var value = obj.value; // 得到修改后的值
        var data = obj.data; // 得到所在行所有键值
        if (!/^[1-9]\d*$/.test(value)) {
            layer.tips('输入的格式不正确，请重新编辑', this, {tips: 1});
            return obj.reedit(); // 重新编辑 -- v2.8.0 新增
        }
        $.ajax({
            url: "/api/drug",
            method: "put",
            data: JSON.stringify(data),
            contentType: "application/json",
            dataType: "json",
            success: function (res) {
                if (res.status === 1) {
                    layer.msg(res.message, {icon: 1});
                    var update = {};
                    update[field] = value;
                    obj.update(update);
                } else {
                    layer.msg(res.message, {icon: 2});
                    obj.reedit();
                }
            }, complete: function (XMLHttpRequest, status) {
                if (status !== "success") {
                    layer.msg("请求出错，请稍候再试");
                    obj.reedit();
                }
            }.bind(this)

        })

    });

    $("#reset").click(function () {
        table.reload('drugList', {
            where: {
                // 将搜索条件置为空
                keyword: ''
                // 如果有其他搜索条件，也需要置为空
            }
        });

    })

    // 搜索提交
    form.on('submit(to-search-drug)', function (data) {
        var field = data.field; // 获得表单字段
        // 执行搜索重载
        table.reload('drugList', {
            where: field // 搜索的字段

        });
        // inst.reload()
        layer.msg('搜索成功');
        return false; // 阻止默认 form 跳转
    });
});